import React, { Component } from 'react'
import canvasBG from './bg.js'
import './index.scss'

import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { setToken } from '../../utils/auth'

export default class index extends Component {
  componentDidMount() {
    // 使用canvas设置登录页面背景
    canvasBG()
  }
  onFinish = values => {
    // console.log('Received values of form: ', values);

    // 把token保存到本地存储
    setToken('FLSDJGLSFJFLSJGSODUSUOWSFLSJFL')
    // 跳转到首页
    this.props.history.push('/app/home')
  }
  render() {
    return (
      <div className="login">
        {/* this is login page */}
        <canvas id="canvas-bg" height="1000"></canvas>

        <div className="login-form">
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: 'Please input your Username!',
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your Password!',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>

              <a className="login-form-forgot" href={'###'}>
                Forgot password
              </a>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                Log in
              </Button>
              Or
              <a href={'###'}>register now!</a>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }
}
